<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstart Base</title>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet">
</head>	
<body>
	
    <div class="container">
      <div class="row-fluid">
        <div class="span2">
          menu
        </div>
        <div class="span10">
          Body content
        </div>
      </div>
      <ul class="responsive-utilities-test">
            <li>Phone<span class="visible-phone">✔ Phone</span></li>
            <li>Tablet<span class="visible-tablet">✔ Tablet</span></li>
            <li>Desktop<span class="visible-desktop">✔ Desktop</span></li>
      </ul>
      
      <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
      <p class="lead"><strong>rendered as bold text</strong><small>This line of text is meant to be treated as fine print.</small>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.<em>rendered as italicized text</em></p>
      <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
      <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
      <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
      <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
      <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula. <abbr title="这里是个属性">attr</abbr><abbr title="这里是个大写属性" class="initialism">你好</abbr></p>
     <address>
      <strong>Twitter, Inc.</strong><br>
      795 Folsom Ave, Suite 600<br>
      San Francisco, CA 94107<br>
      <abbr title="Phone">P:</abbr> (123) 456-7890
    </address>
     
    <address>
      <strong>Full Name</strong><br>
      <a href="mailto:#">first.last@example.com</a>
    </address>
    
    <blockquote class="pull-right">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <small>Someone famous <cite title="Source Title">Source Title</cite></small>
    </blockquote>
    
    <ul>
      <li>A...</li>
      <li>B...</li>
      <li>C...</li>
    </ul>
    
    <ol>
      <li>A...</li>
      <li>B...</li>
      <li>C...</li>
    </ol>
    
    <ul class="unstyled">
      <li>A...</li>
      <li>B...</li>
      <li>C...</li>
    </ul>
    
    <ul class="inline">
      <li>A...</li>
      <li>B...</li>
      <li>C...</li>
    </ul>
    <dl>
      <dt>Description lists</dt>
      <dd>A description list is perfect for defining terms.</dd>
      <dd>A description list is perfect for defining terms.</dd>
    </dl>
    
    <dl class="dl-horizontal">
      <dt>Description lists</dt>
      <dd>A description list is perfect for defining terms.</dd>
      <dd>A description list is perfect for defining terms.</dd>
    </dl>
    
    For example, <code><section></code> should be wrapped as inline.
    
    <pre>
  &lt;p&gt;Sample text here...&lt;/p&gt;
</pre>

    <table class="table table-hover">
    	<caption>表头</caption>
      <thead>
      	<tr>
      	<th>A</th><th>B</th><th>C</th>
        </tr>
      </thead>
      <tbody>
      	<tr CLASS="success">
      	<td>A1</td><td>B1</td><td>C1</td>
        </tr>
      	<tr CLASS="error">
      	<td>A1</td><td>B1</td><td>C1</td>
        </tr>
      	<tr CLASS="warning">
      	<td>A1</td><td>B1</td><td>C1</td>
        </tr>
      	<tr CLASS="info">
      	<td>A1</td><td>B1</td><td>C1</td>
        </tr>
      </tbody>
    </table>
    
    <form class="form-inline">
      <fieldset>
        <legend>Legend</legend>
        <label>Label name</label>
        <input type="text" placeholder="Type something…">
        <span class="help-block">Example block-level help text here.</span>
        <label class="checkbox">
          <input type="checkbox"> Check me out
        </label>
        <button type="submit" class="btn">Submit</button>
      </fieldset>
    </form>
    <form class="form-search">
      <input type="text" class="input-medium search-query">
      <button type="submit" class="btn">Search</button>
    </form>
    
    <form class="form-inline">
      <input type="text" class="input-small" placeholder="Email">
      <input type="password" class="input-small" placeholder="Password">
      <label class="checkbox">
        <input type="checkbox"> Remember me
      </label>
      <button type="submit" class="btn">Sign in</button>
    </form>
    
    <form class="form-horizontal">
      <div class="control-group">
        <label class="control-label" for="inputEmail">Email</label>
        <div class="controls">
          <input type="text" id="inputEmail" placeholder="Email">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="inputPassword">Password</label>
        <div class="controls">
          <input type="password" id="inputPassword" placeholder="Password">
        </div>
      </div>
      <div class="control-group">
        <div class="controls">
          <label class="checkbox">
            <input type="checkbox"> Remember me
          </label>
          <button type="submit" class="btn">Sign in</button>
        </div>
      </div>
    </form>
    
    <label class="checkbox">
      <input type="checkbox" value="">
      Option one is this and that—be sure to include why it's great
    </label>
     
    <label class="radio">
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
      Option one is this and that—be sure to include why it's great
    </label>
    <label class="radio">
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
      Option two can be something else and selecting it will deselect option one
    </label>
    
    <div class="input-prepend input-append">
      <span class="add-on">$</span>
      <input class="span2" id="appendedPrependedInput" type="text">
      <button class="btn" type="button">Go!</button>
      <div class="btn-group">
        <button class="btn dropdown-toggle" data-toggle="dropdown">
          Action
          <span class="caret"></span>
          <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
             <span class="caret"></span>
          </button>
        </button>
        <ul class="dropdown-menu">
          ...
        </ul>
      </div>
    </div>
    
    <input class="input-mini" type="text" placeholder=".input-mini">
    <input class="input-small" type="text" placeholder=".input-small">
    <input class="input-medium" type="text" placeholder=".input-medium">
    <input class="input-large" type="text" placeholder=".input-large">
    <input class="input-xlarge" type="text" placeholder=".input-xlarge">
    <input class="input-xxlarge uneditable-input" type="text" placeholder=".input-xxlarge">
    
    <div class="controls">
      <input class="span5" type="text" placeholder=".span5">
    </div>
    <div class="controls controls-row">
      <input class="span4" type="text" placeholder=".span4">
      <input class="span1" type="text" placeholder=".span1">
    </div>
    
    <div class="form-actions">
      <button type="submit" class="btn btn-primary">Save changes</button>
      <button type="button" class="btn">Cancel</button>
      <input  type="email" required placeholder="test@example.com"><span class="help-inline">Inline help text</span><span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
    </div>
    
    <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
    
    
    <div class="control-group warning">
      <label class="control-label" for="inputWarning">Input with warning</label>
      <div class="controls">
        <input type="text" id="inputWarning">
        <span class="help-inline">Something may have gone wrong</span>
      </div>
    </div>
    <div class="control-group error">
      <label class="control-label" for="inputError">Input with error</label>
      <div class="controls">
        <input type="text" id="inputError">
        <span class="help-inline">Please correct the error</span>
      </div>
    </div>
    <div class="control-group success">
      <label class="control-label" for="inputSuccess">Input with success</label>
      <div class="controls">
        <input type="text" id="inputSuccess">
        <span class="help-inline">Woohoo!</span>
      </div>
    </div>
    
    <p>
      <button class="btn btn-large btn-primary" type="button">Large button</button>
      <button class="btn btn-large" type="button">Large button</button>
    </p>
    <p>
      <button class="btn btn-primary" type="button">Default button</button>
      <button class="btn" type="button">Default button</button>
    </p>
    <p>
      <button class="btn btn-small btn-primary" type="button">Small button</button>
      <button class="btn btn-small" type="button">Small button</button>
    </p>
    <p>
      <button class="btn btn-mini btn-primary" type="button">Mini button</button>
      <button class="btn btn-mini" type="button">Mini button</button>
    </p>
    
    <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
	<button class="btn btn-large btn-block" type="button">Block level button</button>
    
    <a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
	<a href="#" class="btn btn-large disabled">Link</a>
    
    <a class="btn" href="">Link</a>
    <button class="btn" type="submit">Button</button>
    <input class="btn" type="button" value="Input">
    <input class="btn" type="submit" value="Submit">
    
    <div class="btn-toolbar">
      <div class="btn-group">
     
        <a class="btn" href="#"><i class="icon-align-left"></i></a>
        <a class="btn" href="#"><i class="icon-align-center"></i></a>
        <a class="btn" href="#"><i class="icon-align-right"></i></a>
        <a class="btn" href="#"><i class="icon-align-justify"></i></a>
      </div>
    </div>
    
    <div class="btn-group">
      <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
      <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
        <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
        <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
        <li class="divider"></li>
        <li><a href="#"><i class="i"></i> Make admin</a></li>
      </ul>
    </div>
    
    <a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
    <a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
    <a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>
    
    <ul class="nav nav-list">
      <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
      <li><a href="#"><i class="icon-book"></i> Library</a></li>
      <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
      <li><a href="#"><i class="i"></i> Misc</a></li>
    </ul>
    
    <div class="control-group">
      <label class="control-label" for="inputIcon">Email address</label>
      <div class="controls">
        <div class="input-prepend">
          <span class="add-on"><i class="icon-envelope"></i></span>
          <input class="span2" id="inputIcon" type="text">
        </div>
      </div>
    </div>
    
    <div class="dropdown clearfix">
              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
                <li><a tabindex="-1" href="#">Action</a></li>
                <li><a tabindex="-1" href="#">Another action</a></li>
                <li><a tabindex="-1" href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a tabindex="-1" href="#">Separated link</a></li>
              </ul>
	</div>
    <div class="btn-toolbar">
    <div class="btn-group">
      <button class="btn">1</button>
      <button class="btn">2</button>
      <button class="btn">3</button>
    </div>
    <div class="btn-group btn-group-vertical">
      <button class="btn">5</button>
      <button class="btn">6</button>
      <button class="btn">3</button>
    </div>
    </div>
    <div class="btn-group">
      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        Action
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <!-- dropdown menu links -->
      </ul>
    </div>
    
    <div class="btn-group dropup">
      <button class="btn">Dropup</button>
      <button class="btn dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <!-- dropdown menu links -->
      </ul>
    </div>
    
    <ul class="nav nav-tabs">
      <li class="active">
        <a href="#">Home</a>
      </li>
      <li><a href="#">Home1</a></li>
      <li><a href="#">Home2</a></li>
    </ul>
    <ul class="nav nav-tabs nav-stacked">
      <li class="active">
        <a href="#">Home</a>
      </li>
      <li><a href="#">Home1</a></li>
      <li><a href="#">Home2</a></li>
    </ul>
    <ul class="nav nav-pills">
      <li class="active">
        <a href="#">Home</a>
      </li>
      <li><a href="#">Home1</a></li>
      <li class="disabled"><a href="#">Home2</a></li>
    </ul>
    
    <ul class="nav nav-tabs">
    	<li class="active">
        <a href="#">Home</a>
      </li>
      <li><a href="#">Home1</a>
      <li class="dropdown">
        <a class="dropdown-toggle"
           data-toggle="dropdown"
           href="#">
            Dropdown
            <b class="caret"></b>
          </a>
        <ul class="dropdown-menu">
          <!-- links -->
        </ul>
      </li>
    </ul>
    
    <ul class="nav nav-list">
      <li class="nav-header">List header</li>
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Library</a></li>
      <li class="divider"></li>
      <li class="nav-header">List header</li>
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Library</a></li>
    </ul>
    
    <div class="tabbable tabs-below"> <!-- Only required for left/right tabs -->
    
      <div class="tab-content">
        <div class="tab-pane active" id="tab1">
          <p>I'm in Section 1.</p>
        </div>
        <div class="tab-pane" id="tab2">
          <p>Howdy, I'm in Section 2.</p>
        </div>
      </div>
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
      </ul>
    </div>
    
    <div class="navbar">
      <div class="navbar-inner">
        <a class="brand" href="#">Title</a>
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div>
    </div>
    
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
     
          <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
     
          <!-- Be sure to leave the brand out there if you want it shown -->
          <a class="brand" href="#">Project name</a>
     
          <!-- Everything you want hidden at 940px or less, place within here -->
          <div class="nav-collapse collapse">
            <!-- .nav, .navbar-search, .navbar-form, etc -->
          </div>
     
        </div>
      </div>
    </div>
    
    <ul class="thumbnails">
      <li class="span4">
        <a href="#" class="thumbnail">
          <img data-src="holder.js/300x200" alt="">
        </a>
      </li>
    </ul>
    
    </div>

    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
</body>
</html>
